import './index.scss'
import { useState, useEffect, useRef } from 'react'
import { getLun } from '../../request/api'
import { Carousel } from 'antd';
import Seach from '../../components/Seach/index';
const contentStyle: React.CSSProperties = {
  margin: 0,
  height: '430px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
const Carouseld = () => {

  const [lun, SetLun] = useState([])
  const carouselRef = useRef<any>(null);
  useEffect(() => {
    getLun().then(res => {
      console.log(res)
      SetLun(res.data.Lun)

    })

  }, [])

  const next = () => {
    if (carouselRef.current) {
      carouselRef.current.next();
    }
  };

  // 切换至上一张图片  
  const prev = () => {
    if (carouselRef.current) {
      carouselRef.current.prev();
    }
  };
  return (
    <div className='lunbo'>
      <div>
        <div onClick={prev} className='prev' disabled={!lun.length || carouselRef.current?.isAtFirst}><span className='iconfont icon-xiangzuojiantou'></span></div>
        <div onClick={next} className='next' disabled={!lun.length || carouselRef.current?.isAtLast}><span className='iconfont icon-youjiantou'></span></div>
      </div>
      <Carousel arrows={false} infinite={true} ref={carouselRef} autoplay autoplaySpeed={3000} >
        {lun.map((item: any, index) => (
          <div key={index} style={contentStyle}>
            {/* 假设每个item都有一个imgUrl属性 */}
            <img src={item.image} alt={`Slide ${index + 1}`} style={{ width: '100%', height: '430px' }} />
          </div>
        ))}
      </Carousel>

      <div className='Seach'>
        <Seach></Seach>
      </div>
    </div>
  )
}

export default Carouseld